<script setup>
import {ref} from 'vue'
import {loginUser} from '@/api/user'
import { ElMessage } from 'element-plus'
import router from '@/router'

const loginFormRef = ref(null)

const loginForm= ref({
  username:'',
  password:''
})

const loginRules = ref({
  username: [
    { required: true, message: '账号不能为空！', trigger: 'blur' },
    { min: 3, max: 20, message: '账号长度在3-20位之间！', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '密码不能为空！', trigger: 'blur' },
    { min: 3, max: 60, message: '密码长度在3-60位之间！', trigger: 'blur' },
  ]
})

const submitForm=async()=>{
    if (!loginFormRef.value) return
  await loginFormRef.value.validate(async(valid, fields) => {
    if (valid) {
      let result = await loginUser(loginForm.value)
      if(result.code==200){
        //将用户信息存入到localStore
        localStorage.setItem('userInfo',JSON.stringify(result.data))
        //跳转至主页,路由
        ElMessage.success('登录成功！')
        router.push('/')
      }else{
        ElMessage.error('登录失败！')
      }
    
    } else {
      console.log('校验失败！!', fields)
    }
  })
}

</script>

<template>
  <el-form ref="loginFormRef" style="max-width: 600px" :model="loginForm" :rules="loginRules"  label-width="auto">
    <el-form-item label="姓名" prop="username">
      <el-input v-model="loginForm.username" />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="loginForm.password" />
    </el-form-item>
    <el-button type="primary" @click="submitForm()">
      登录
    </el-button>
  </el-form>
</template>
